<template>
  <el-container>
    <div class="back">
      <el-button icon="el-icon-back" circle @click="back"></el-button>
      <el-button icon="el-icon-full-screen" circle @click="handleFullScreen"></el-button>
    </div>
    <el-aside>
      <controller-aside
          @markSeats="markSeats"
          @clearSeat="clearSeat"
          @confirm="confirm"
      />
    </el-aside>
    <el-main>
      <coordinate-system ref="coordinateSystem"/>
    </el-main>
  </el-container>
</template>

<script>
import ControllerAside from './components/ControllerAside.vue'
import CoordinateSystem from './components/CoordinateSystem'
import {mapActions, mapState, mapMutations} from 'vuex'

export default {
  name: 'HallSeat',
  components: {
    ControllerAside,
    CoordinateSystem
  },
  props: {},
  data() {
    return {

    }
  },
  watch: {},
  computed: {
    ...mapState({
      fullscreen: state => state.config.fullscreen,
    }),
  },
  methods: {
    ...mapMutations([
      'makeFullscreen'
    ]),
    ...mapActions([
      'clearHallSeat'
    ]),
    markSeats(e) {
      this.$refs.coordinateSystem.markSeats(e)
    },
    clearSeat() {
      this.$refs.coordinateSystem.clearSeat()
    },
    confirm() {
      this.$refs.coordinateSystem.confirm()
    },
    back() {
      this.$router.replace({name: 'lobbyList'})
    },
    handleFullScreen() {
      let element = document.documentElement
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
        this.$message({
          showClose: true,
          message: '已退出全屏模式',
          type: 'success'
        })
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen()
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen()
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen()
        } else if (element.msRequestFullscreen) {
          // IE11
          element.msRequestFullscreen()
        }
        this.$message({
          showClose: true,
          message: '已进入全屏幕模式,如需退出请按ESC按键或再次点击',
          type: 'success'
        })
      }
      this.makeFullscreen(!this.fullscreen)
    }
  },
  created() {
  },
  mounted() {

  },
}
</script>
<style scoped>
.el-container {
  color: rgba(0, 0, 0, 0.4);
}

.el-container .back {
  position: absolute;
  left: 320px;
  top: 20px;
}

.el-container .el-main {
  background-color: #E9EEF3;
  text-align: center;
  padding: 0;
}

.el-container .el-aside {
  height: 100vh;
  text-align: center;
}
</style>
